<template>
  <view>
    <l-background color="#ffffff" />
    <view class="padding-30">
      <view class="container padding-30 margin-bottom-56">
        <view class="flex-row">
          <textarea
            class="flex-item text-30"
            :value="form.content"
            placeholder="请输入您的宝贵意见，我们将尽时为您处理"
            :maxlength="500"
            :show-confirm-bar="false"
            disable-default-padding
            @input="changeValue"
          />
        </view>

        <view class="flex-row justify-end align-center margin-top-20">
          <text class="text-28 color-t3">{{ form.content.length }}/500</text>
        </view>

        <view class="margin-top-20" style="margin-top: 20rpx">
          <text class="text-30 color-t1">上传图片（最多6张）</text>
          <tui-upload
            background-color="#FFFFFF"
            :value="images"
            :icon-size="80"
            :limit="6"
            width="190"
            height="190"
            margin="20rpx 30rpx 0 0"
            dir="company"
            @chooseImage="uploadPic"
            @remove="remove"
          />
        </view>
      </view>

      <tui-button @click="submit">提交</tui-button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { addFeedback } from '../api'
export default {
  name: 'Feedback',
  data() {
    return {
      form: {
        content: '',
        images: '',
        platform: 'auto_company_mp'
      },
      images: []
    }
  },
  computed: {
    ...mapGetters({
      userId: 'userId'
    })
  },
  methods: {
    changeValue(e) {
	  var value = e.detail.value;
	  var len = parseInt(value.length);
	  if(len > 500){
		  value = value.substring(0,500)
	  }
      this.form.content = value
    },
    // 获取上传图片的地址
    uploadPic(filePath) {
      this.images.push(...filePath)
    },
    // 删除图片
    remove(e) {
      this.images.splice(e.index, 1)
    },
    async submit() {
      if (!this.form.content && !this.images.length) {
        this.toast('请输入反馈内容或上传图片')
      } else {
        this.form.images = this.images.join(',')
        const [err, res] = await addFeedback(this.form)
        if (!this.$http.errorCheck(err, res)) return false

        this.toast('提交成功，感谢您的反馈', () => {
          this.jump()
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(bottom,56);

.container{
  background:$color-background;
  border-radius:$radius-default;
}
</style>
